<template>
  <div class="image-config">
    <a-form :model="formState" layout="vertical">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="亮度" name="brightness">
            <a-slider v-model:value="formState.brightness" :min="0" :max="100" :marks="{
              0: '0',
              50: '50',
              100: '100'
            }" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="对比度" name="contrast">
            <a-slider v-model:value="formState.contrast" :min="0" :max="100" :marks="{
              0: '0',
              50: '50',
              100: '100'
            }" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item label="饱和度" name="saturation">
            <a-slider v-model:value="formState.saturation" :min="0" :max="100" :marks="{
              0: '0',
              50: '50',
              100: '100'
            }" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="锐度" name="sharpness">
            <a-slider v-model:value="formState.sharpness" :min="0" :max="100" :marks="{
              0: '0',
              50: '50',
              100: '100'
            }" />
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label="曝光模式" name="exposureMode">
        <a-radio-group v-model:value="formState.exposureMode">
          <a-radio value="auto">自动</a-radio>
          <a-radio value="manual">手动</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="曝光时间" name="exposureTime" v-if="formState.exposureMode === 'manual'">
        <a-select v-model:value="formState.exposureTime">
          <a-select-option value="1/10000">1/10000</a-select-option>
          <a-select-option value="1/5000">1/5000</a-select-option>
          <a-select-option value="1/2000">1/2000</a-select-option>
          <a-select-option value="1/1000">1/1000</a-select-option>
          <a-select-option value="1/500">1/500</a-select-option>
          <a-select-option value="1/250">1/250</a-select-option>
          <a-select-option value="1/125">1/125</a-select-option>
          <a-select-option value="1/60">1/60</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label="白平衡" name="whiteBalance">
        <a-radio-group v-model:value="formState.whiteBalance">
          <a-radio value="auto">自动</a-radio>
          <a-radio value="manual">手动</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="色温" name="colorTemp" v-if="formState.whiteBalance === 'manual'">
        <a-slider v-model:value="formState.colorTemp" :min="2000" :max="8000" :step="100" :marks="{
          2000: '2000K',
          5000: '5000K',
          8000: '8000K'
        }" />
      </a-form-item>

      <a-form-item label="日夜模式" name="dayNightMode">
        <a-radio-group v-model:value="formState.dayNightMode">
          <a-radio value="auto">自动</a-radio>
          <a-radio value="day">日间</a-radio>
          <a-radio value="night">夜间</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item>
        <a-space>
          <a-button type="primary" @click="handleSubmit">保存设置</a-button>
          <a-button @click="handleReset">重置</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { defineComponent, reactive, watch } from 'vue';
import { message } from 'ant-design-vue';

export default defineComponent({
  name: 'ImageConfig',
  setup() {
    const defaultSettings = {
      brightness: 50,
      contrast: 50,
      saturation: 50,
      sharpness: 50,
      exposureMode: 'auto',
      exposureTime: '1/1000',
      whiteBalance: 'auto',
      colorTemp: 5000,
      dayNightMode: 'auto'
    };

    const formState = reactive({ ...defaultSettings });

    const handleSubmit = async () => {
      try {
        // 这里添加实际的API调用
        message.success('图像参数设置已保存');
      } catch (error) {
        message.error('保存失败，请重试');
      }
    };

    const handleReset = () => {
      Object.assign(formState, defaultSettings);
      message.info('已重置为默认设置');
    };

    return {
      formState,
      handleSubmit,
      handleReset
    };
  }
});
</script>

<style scoped>
.image-config {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
</style>
